<template>
  <!-- 第三方账号列表 -->

  <a-spin :loading="listLoading" tip="加载数据中..." class="w-full">
    <div class="space-y-4">
      <div class="flex items-center justify-between p-4 bg-gray-50 border rounded">
        <div class="flex items-center">
          <img src="/icons/wxwork.png" alt="Google Logo" class="w-6 h-6 mr-3">
          <span class="font-medium">企业微信</span>
        </div>
        <a-popconfirm v-if="typeList.indexOf('wework') > -1" content="确认解除绑定?" @ok="unbind('wework')">
          <button class="bg-gray-300 hover:bg-gray-400 text-black py-1 px-4 rounded">解绑</button>
        </a-popconfirm>
        <button class="bg-blue-500 hover:bg-blue-700 text-white py-1 px-4 rounded" v-else
                @click="open('wxwork')">绑定
        </button>
      </div>
<!--      <div class="flex items-center justify-between p-4 bg-gray-50 border rounded">-->
<!--        <div class="flex items-center">-->
<!--          <img src="/icons/dingtalk.png" alt="Facebook Logo" class="w-6 h-6 mr-3">-->
<!--          <span class="font-medium">钉钉</span>-->
<!--        </div>-->
<!--        <a-popconfirm v-if="typeList.indexOf('dingtalk') > -1" content="确认解除绑定?" @ok="unbind('dingtalk')">-->
<!--          <button class="bg-gray-300 hover:bg-gray-400 text-black py-1 px-4 rounded">解绑</button>-->
<!--        </a-popconfirm>-->
<!--        <button class="bg-blue-500 hover:bg-blue-700 text-white py-1 px-4 rounded" v-else-->
<!--                @click="open('dingtalk')">绑定-->
<!--        </button>-->
<!--      </div>-->
    </div>
  </a-spin>

  <!-- 操作反馈 -->
  <div class="mt-6">
    <div class="p-4 bg-green-100 border border-green-400 text-green-700 rounded hidden" id="success-message">
      操作成功！
    </div>
    <div class="p-4 bg-red-100 border border-red-400 text-red-700 rounded hidden" id="error-message">
      操作失败，请重试。
    </div>
  </div>
  <a-modal v-model:visible="visible" unmount-on-close :footer="false">
    <div class="flex justify-center items-center">
      <wxwork v-model="loading" v-if="type =='wxwork'" type="bind" @close="close"/>
      <dingtalk v-model="loading" v-else-if="type =='dingtalk'" type="bind" @close="close"/>
    </div>
  </a-modal>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {useRouter} from 'vue-router'
import Wxwork from "@/views/wxwork.vue";
import Dingtalk from "@/views/dingtalk.vue";
import user from "@/api/system/user.js";

const router = useRouter()
const visible = ref(false)
const type = ref(false)
const loading = ref(false)
const listLoading = ref(true)
const typeList = ref([])

const open = (value) => {
  visible.value = true
  type.value = value
  loading.value = true
}
const init = () => {
  user.getSocialites().then(res => {
    if (!res || res.code != 200) {
      return
    }
    typeList.value = res.data
  }).finally(() => {
    listLoading.value = false
  })
}
const unbind = (type) => {
  user.unbindSocialite(type).then(res => {
    if (!res || res.code != 200) {
      return
    }
    init()
  })
}
const close = () => {
  init()
  visible.value = false
}
onMounted(() => init())
</script>
